<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>圣诞活动</title>
  <link rel="stylesheet" href="/mobile/css/index.css" />
  <script src="/mobile/js/vue.js"></script>
  <script src="/mobile/js/axios.min.js"></script>
  <script src="/mobile/js/vant.min.js"></script>
  <script src="/mobile/js/dayjs.min.js"></script>
  <script src="/mobile/js/crypto-js.js"></script>
  <script src="/mobile/js/aes.js"></script>
  <script src="/mobile/js/common.js"></script>
  <style>
  * {
    margin: 0;
    padding: 0;
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+/Edge */
    user-select: none;
    /* Standard syntax */
    list-style: none;
  }

  #app {
    background: #772320;
    min-height: 100vh;
    box-sizing: border-box;
    color: #AB6310;
  }
  .top {
    width: 100%;
    height: 113.8666vw;
    background: url(/mobile/img/christmas-top.jpg) no-repeat center;
    background-size: cover;
    position: relative;
  }
  .btn {
    width: 8.2666vw;
    position: absolute;
    right: 0;
    top: 39.4666vw;
  }
  .content {
    width: 100%;
    height: 188.8vw;
    background: url(/mobile/img/christmas-content.png) no-repeat center;
    background-size: cover;
    margin-top: -9.0666vw;
    position: relative;
    overflow: hidden;
  }
  .list {
    margin: 9.0666vw 2.4vw 4.8vw;
  }
  .content-header {
    width: 95.2vw;
  }
  .list-data {
    width: 92.5333vw;
    height: 164.2666vw;
    background: url(/mobile/img/christmas-list.png) no-repeat center;
    background-size: cover;
    margin: -5.3333vw 1.3333vw 0;
    padding: 10.6666vw 3.2vw 4vw;
    box-sizing: border-box;
  }
  .list-contain {
    height: 100%;
    overflow-y: auto;
  }
  .data-empty {
    text-align: center;
    line-height: 164.2666vw;
  }
  .list-item {
    width: 100%;
    height: 17.0666vw;
    background: url(/mobile/img/christmas-list-item.png) no-repeat center;
    background-size: cover;
    margin-bottom: 1.8666vw;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2.666vw 4vw 2.6666vw 2.6666vw;
    color: #AB6310;
  }
  .list-value {
    text-align: right;
  }
  .label {
    font-size: 2.666vw;
  }
  .value {
    font-size: 3.2vw;
    margin-top: 1px;
  }
  .list-user {
    display: flex;
    align-items: center;
  }
  .list-index {
    font-size: 4.2666vw;
  }
  .list-avatar {
    width: 10.6666vw;
    height: 10.6666vw;
    border-radius: 50%;
    margin-left: 2.666vw;
    border: 1px solid #ffe5f0;
  }
  .list-name {
    margin-left: 2.6666vw;
    font-size: 3.2vw;
  }
  .rule-popup {
    background: transparent!important;
  }
  .rule-box {
    width: 81.3333vw;
    height: 107.2vw;
    background: url(/mobile/img/christmas-rule-box.png) no-repeat center;
    background-size: contain;
    background-position: center center;
  }
  .rule-contain {
    width: 100%;
    height: 100%;
    padding: 17.3333vw 4.8vw 4vw;
    box-sizing: border-box;
    font-size: 3.2vw;
    line-height: 1.4166;
  }
  .rule-title {
    text-align: center;
    font-size: 3.7333vw;
  }
  .rule-time {
    margin-top: 2.666vw;
  }
  .rule-content {
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }
  .list-num {
    margin-top: 1.3333vw;
  }

  </style>
</head>

<body>
  <div id="app" v-cloak>
    <div class="top">
      <img class="btn" src="/mobile/img/christmas-btn.png" alt="" @click="ruleShow = true">
    </div>
    <div class="content">
      <div class="list">
        <img class="content-header" src="/mobile/img/christmas-list-header.png" alt="">
        <div class="list-data">
          <div class="list-contain" v-if="dataList.length">
            <div class="list-item" v-for="(item, index) in dataList" :key="index">
              <div class="list-user">
                <span class="list-index">{{index+1}}</span>
                <img class="list-avatar" :src="`${item.avatar}?x-oss-process=image/format,jpg`" alt="">
                <div class="list-name">
                  <div>{{item.nickname}}</div>
                  <div class="list-num">{{item.goodNum}}</div>
                </div>
              </div>
              <div class="list-value">
                <div class="label">圣诞值</div>
                <div class="value">{{item.score}}</div>
              </div>
            </div>
          </div>
          <div class="data-empty" v-else>暂无榜单，快去参加活动吧</div>
        </div>
      </div>
    </div>
    <van-popup v-model="ruleShow" class="rule-popup">
      <div class="rule-box" @click.stop>
        <div class="rule-contain">
          <div class="rule-content">
            <div class="rule-title">“圣诞欢歌，语伴同行”</div>
            <div class="rule-time">活动时间<br>12月23日-12月30日</div>
            <div class="rule-time">
              活动内容：<br>
              1. 圣诞礼物大放送：平台精心打造多款独具圣诞特色的限时限定礼物，价格分别为 520贝壳、1000贝壳、9999贝壳、52000贝壳，满足不同用户的赠送需求。同时，星球探索低级场奖池设置丰厚奖励，包含 18800贝壳和131400贝壳等惊喜好礼。<br>
              2. 圣诞专属榜单大作战：限时推出专属榜单，仅计算圣诞礼物所贡献的圣诞值。每日榜单竞争激烈，日榜第一名将荣耀获得圣诞专属头像框和专属座驾，第二名第三名亦可得到独特的头像框。这些奖励有效期为 3 天，且每日奖励可叠加，激励用户持续冲榜，展现非凡实力与独特魅力。<br>
              3.圣诞惊喜礼盒套装大放送：在 12 月 24 日和 25 日这两个充满节日氛围的日子里，日榜前三的用户将额外获得一份精心准备的圣诞惊喜礼盒套装。这些礼盒将由平台直邮到家，为用户送去满满的圣诞惊喜与关怀。<br>
              注：日榜前三的门槛为 5000 圣诞值(100贝壳=1圣诞值，送出圣诞礼物或收到圣诞礼物都计入圣诞值)，未达此标准的用户将不计入奖励范围，确保奖励的稀缺性与珍贵性。
            </div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
  <script>
  new Vue({
    el: '#app',
    data: {
      ruleShow: false,
      dataList: []
    },
    created() {
      this.getData()
    },
    methods: {
      getData() {
        request.get(`/api/business/app/shenDan/list`).then(res => {
          this.dataList = res.data
        })
      },
    }
  })
  </script>
</body>

</html>